import  ProTable, { ActionType } from '@ant-design/pro-table';
import { Modal,Image} from "antd";
import { detailsList} from "@/services/ant-design-pro/marketing";
import {useEffect, useRef} from "react";


export default (props) => {
  const {modalList,linkModal,details} = props
  const actionRef = useRef<ActionType>();

  useEffect(()=>{
    actionRef.current?.reload()
  },[details])

  const columns = [
    {
      dataIndex: 'id',
      title: '用户ID',
      valueType: 'name',
      width: 150,
      key: 'name',
      align: 'center',
    },
    {
      title: '头像',
      dataIndex: 'image',
      key: 'image',
      valueType: 'image',
      width: 150,
      align: 'center',
      render:(_,record)=>{
        return <Image width={50} src={record.user.avatar_url}/>
      }
    },
    {
      dataIndex: 'name',
      title: '用户名称',
      valueType: 'name',
      width: 150,
      align: 'center',
      key: 'name',
      render: (_,record)=>{
        return <span>{record.user.nickname}</span>
      }
    },
    {
      title: '砍价金额',
      dataIndex: 'price',
      key: 'status',
      width: 200,
      align: 'center',
      valueType: 'status',
    },
    {
      title: '砍价时间',
      dataIndex: 'created_at',
      key: 'status',
      width: 200,
      align: 'center',
      valueType: 'status',
    },
  ]
  return (
    <div >
      <Modal
        title="查看详情"
        visible={modalList}
        onCancel={linkModal}
        footer={false}
        width={800}
      >
        <ProTable
          actionRef={actionRef}
          columns={columns}
          request={async ()=> await detailsList(details.id)}
          rowKey="outUserNo"
          pagination={{
            showQuickJumper: true,
          }}
          toolBarRender={false}
          search={false}
        />
      </Modal>
    </div>
  )
};
